<template>
    <el-select :value="valueTitle" :clearable="clearable" @clear="clearHandle" :disabled="disabled" style="width:100%"
        :placeholder="placeholder">
        <el-option :value="valueTitle" :label="valueTitle">
            <el-tree id="tree-option" ref="selectTree" :accordion="accordion" :data="options" :props="props"
                :node-key="props.value" :default-expanded-keys="defaultExpandedKey" @node-click="handleNodeClick">
            </el-tree>
        </el-option>
    </el-select>
</template>

<script>
    export default {
        name: "el-tree-select",
        props: {
            /* 配置项 */
            props: {
                type: Object,
                required: false,
                default: () => {
                    return {
                        parent: 'parentId', //父级ID
                        value: 'id', // ID字段名
                        label: 'label', // 显示名称
                        children: 'children' // 子级字段名
                    }
                }
            },
            /* 选项列表数据(树形结构的对象数组) */
            options: {
                type: Array,
                required: false,
                default: () => {
                    return []
                }
            },
            // 是否禁用
            disabled: {
                type: Boolean,
                default: false
            },
            // 输入框占位符
            placeholder: {
                type: String,
                required: false,
                default: '请选择',
            },
            /* 初始值 */
            value: {
                type: String,
                required: false,
                default: () => {
                    return '0'
                }
            },
            /* 可清空选项 */
            clearable: {
                type: Boolean,
                default: () => {
                    return true
                }
            },
            /* 自动收起 */
            accordion: {
                type: Boolean,
                default: () => {
                    return false
                }
            },
        },
        data() {
            return {
                valueId: this.value, // 初始值
                valueTitle: '',
                defaultExpandedKey: []
            }
        },
        watch: {
            value() {
                this.valueId = this.value
                // if (this.valueId && this.options.lenght > 0) {
                if (this.valueId) {
                    this.initHandle()
                } else {
                }
            }
        },
        mounted() {
            this.initHandle()
        },
        methods: {
            // 初始化值
            initHandle() {
                // console.log(this.options, this.valueId)
                // if (!this.valueId) return;
                if (!this.valueId) {
                    // console.log("参数无效!", this.valueId)
                    this.clearHandle()
                } else {
                    this.$nextTick(() => {
                        const tempValueTitle = this.$refs.selectTree.getNode(this.valueId) // 初始化显示
                        this.valueTitle = tempValueTitle ? tempValueTitle.data[this.props.label] : ''
                        this.$refs.selectTree.setCurrentKey(this.valueId) // 设置默认选中
                        this.defaultExpandedKey = [this.valueId] // 设置默认展开
                    });
                    this.initScroll()
                }
            },
            // 初始化滚动条
            initScroll() {
                this.$nextTick(() => {
                    let scrollWrap = document.querySelectorAll('.el-scrollbar .el-select-dropdown__wrap')[0]
                    let scrollBar = document.querySelectorAll('.el-scrollbar .el-scrollbar__bar')
                    scrollWrap.style.cssText = 'margin: 0px; max-height: none; overflow: hidden;'
                    scrollBar.forEach(ele => ele.style.width = 0)
                })
            },

            // 切换选项
            handleNodeClick(node) {
                this.valueTitle = node[this.props.label]
                this.valueId = node[this.props.value]
                this.$emit('getValue', this.valueId)
                this.$emit('input',this.valueId)
                this.defaultExpandedKey = []
            },
            // 清除选中
            clearHandle() {
                this.valueTitle = ''
                this.valueId = null
                this.defaultExpandedKey = []
                this.clearSelected()
                this.$emit('getValue', null)
            },
            /* 清空选中样式 */
            clearSelected() {
                let allNode = document.querySelectorAll('#tree-option .el-tree-node')
                allNode.forEach((element) => element.classList.remove('is-current'))
            },
        }
    };
</script>
<style scoped>
    .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
        height: auto;
        max-height: 274px;
        padding: 0;
        overflow: hidden;
        overflow-y: auto;
    }

    .el-select-dropdown__item.selected {
        font-weight: normal;
    }

    ul li>>>.el-tree .el-tree-node__content {
        height: auto;
        padding: 0 20px;
    }

    .el-tree-node__label {
        font-weight: normal;
    }

    .el-tree>>>.is-current .el-tree-node__label {
        color: #409EFF;
        font-weight: 700;
    }

    .el-tree>>>.is-current .el-tree-node__children .el-tree-node__label {
        color: #606266;
        font-weight: normal;
    }
</style>